<template>
  <div class="film-detail">
    <div v-show="!showPhotos">
      <!-- 左箭头 -->
      <!-- 宣传图 -->
      <!-- 描述信息 -->
      <div class="film-img">
        <img :src="currentFilm.poster" class="poster-img" />
        <img
          src="@/assets/left.png"
          alt=""
          class="icon-back"
          @click="goBack()"
        />
      </div>
      <filmInfo :film="currentFilm" />
      <!-- 演职人员 -->
      <div class="actors">
        <van-cell title="演职人员" size="large" />
        <!-- swiper开始 -->
        <div class="swiper-container swiper-actors">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in currentFilm.actors"
              :key="index">
              <div class="row-lazy-img">
                <img :src="item.avatarAddress" />
              </div>
              <div class="actors-name">{{ item.name }}</div>
              <div class="actors-role">{{ item.role }}</div>
            </div>
          </div>
          <!-- swiper结束 -->
        </div>
      </div>
      <div class="photos" id="photos">
        <!-- 剧照 -->
        <van-cell
          title="剧照"
          :value="'全部(5)>'"
          size="large"
          @click="showPhotos = true"
        />
        <div class="swiper-container swiper-photos">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in currentFilm.photos"
              :key="index"
            >
              <div class="row-lazy-img">
                <img :src="item" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-button
        v-if="currentFilm.isPresale || currentFilm.isSale"
        color="#ff5f16"
        class="buy-btn"
        @click="toCinemas(currentFilm.filmId)"
        >选座购票</van-button
      >
    </div>

    <div v-show="showPhotos">
      <p class="top-bar">
        <img
          src="@/assets/left.png"
          alt=""
          class="icon-back"
          @click="showPhotos = false"
        />
      </p>
      <div class="film-photos">
        <div v-for="(photo, index) in currentFilm.photos" :key="index">
          <img :src="photo" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper.css";
import filmInfo from "./film-info";
export default {
  components: {
    filmInfo,
  },
  data() {
    return {
      currentFilm: {},
      showPhotos: false,
      // photos: this.currentFilm.photos.length || 0
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.newSwiper();
  },
  methods: {
    toCinemas(filmId) {
      this.$router.push(`/film/${filmId}/cinemas`);
    },
    goBack() {
      this.$router.go(-1);
    },
    newSwiper() {
      new Swiper(".swiper-actors", {
        pagination: ".swiper-pagination",
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 0,
      });
      new Swiper(".swiper-photos", {
        pagination: ".swiper-pagination",
        slidesPerView: 2,
        paginationClickable: true,
        spaceBetween: 0,
      });
    },
    // filmId: 6355
    // k: 1094443
    getData() {
      this.$api({
        headers: {
          "X-Host": "mall.film-ticket.film.info",
        },
        method: "get",
        url: "https://m.maizuo.com/gateway",
        params: {
          // 3. 取路由数据  this.$route.params.参数名
          filmId: this.$route.params.filmId,
          k: 1094443,
        },
      }).then((res) => {
        this.currentFilm = res.data.data.film;
      });
    },
  },
};
</script>

<style scoped>
.film-detail {
  height: 100vh;
  padding-bottom: 44px;
  overflow-y: auto;
  overflow-x: hidden;
}
button {
  width: 100%;
}
.film-img {
  position: relative;
  width: 100%;
  height: 56vw;
  overflow: hidden;
}
.film-img .poster-img {
  width: 100%;
  position: absolute;
  top: -75%;
}
.icon-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
}
.swiper-wrapper {
  background: #fff;
  margin-bottom: 16px;
}

.actors .swiper-slide-active {
  text-align: center;
  width: 120px;
}
.actors .row-lazy-img {
  width: 85px;
  height: 85px;
  margin: 0 auto;
  overflow: hidden;
}
.actors .row-lazy-img img {
  width: 100%;
  transform: translate(0%, -14%);
}

.actors-name {
  padding-top: 10px;
  font-size: 12px;
  color: #191a1b;
  width: 85px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.actors-role {
  font-size: 10px;
  color: #797d82;
  text-align: center;
  width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photos .swiper-slide-active {
  text-align: center;
  width: 200px;
}
.photos .row-lazy-img {
  display: flex;
  align-items: center;
  width: 150px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 10px;
  background: #fff;
}
.photos .row-lazy-img img {
  width: 100%;
}

.film-photos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.film-photos div {
  width: 33%;
  height: 33%;
  padding: 0.5px;
}
.film-photos div img {
  width: calc(33vw - 1px);
  height: calc(33vw - 1px);
}

.buy-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}
/* 电影详情 */
.film-detail-info {
  padding: 15px;
  padding-top: 12px;
  background-color: #fff;
}
</style>